<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性</title>
	</head>
	<body>
		<div id="div1" class="box" title="one">class为box的div1</div>
		<div id="div2" class="box" title="two">class为box的div2</div>
		<div id="div3">div3</div>
		<span class="box">class为box的span</span>
		<br/>
		<ul>
			<li>AAAAA</li>
			<li title="hello" class="box2">BBBBB</li>
			<li class="box">CCCCC</li>
			<li title="hello">DDDDD</li>
			<li title="two"><span>BBBBB</span></li>
		</ul>
		<input type="text" name="username" value="guiguClass"/>
		<br>
		<input type="checkbox" />
		<input type="checkbox" />
		<br>
		<button>选中</button>
		<button>不选中</button>
		
		<!-- 1.操作任意属性 attr() removeAttr() prop()
		2.操作class属性 addClass() removeClass()
		3.操作HTML代码/文本/值 html() val() -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需要:
			// 1.读取第一个div的title属性
			// 2.给所有的div设置name属性(value为atguigu)
			// 3.移除所有div的title属性
			// 4.给所有的div设置class='guiguClass'
			// 5.给所有的div添加class="abc"
			// 6.移除所有div的guiguClass的class
			// 7.得到最后一个li的表情文本
			// 8.设置第一个li的标签体为"<h1>mmmmmmmm</h1>"
			// 9.得到输入框中的value值
			// 10.将输入框的值设置为atguigu
			// 11.点击'全选'按钮实现全选
			// 12.点击'不全信'按钮实现全不选
			
			// 1.读取第一个div的title属性
			// console.log($('div:first').attr('title'))
			
			// 2.给所有的div设置name属性(value为atguigu)
			// $('div').attr('name','atguigu')
			
			// 3.移除所有div的title属性
			// $('div').removeAttr('title')
			
			// 4.给所有的div设置class='guiguClass'
			// $('div').attr('class','guiguClass')
			
			// 5.给所有的div添加class="abc"
			// $('div').addClass('abc')
			
			// 6.移除所有div的guiguClass的class
			// $('div').removeClass('guiguClass')
			
			// 7.得到最后一个li的标签文本
			// console.log($('li:last').html())
			
			// 8.设置第一个li的标签体为"<h1>mmmmmmmm</h1>"
			// $('li:first').html('<h1>mmmmmmmm</h1>')
			
			// 9.得到输入框中的value值
			// console.log($(':text').val())
			
			// 10.将输入框的值设置为atguigu
			// $(':text').val('atguigu')
			
			// 11.点击'全选'按钮实现全选
				// attr():操作属性值为非布尔值的属性
				// prop():专门操作属性值为布尔值的属性
			
			var $checkboxs = $(':checkbox')
			$('button:first').click(function(){
				$checkboxs.prop('checked',true)
			})
			
			// 12.点击'不全信'按钮实现全不选
			$('button:last').click(function(){
				$checkboxs.prop('checked',false)
			})
		</script>
	</body>
</html>
